//TODO: оптимизировать

// LIGHT

[data-theme='light:solarized'] {
  --color-primary: hsl(44, 84%, 54%);

  --color-bg: hsl(44, 87%, 94%);

  --color-contrast-lower: hsl(44, 84%, 90%);
  --color-contrast-lower-alt: hsl(44, 0%, 98%);
  --color-contrast-lower-alt2: hsl(44, 60%, 94%);
  --color-contrast-lower-alt3: hsl(44, 60%, 85%);
  --color-contrast-lower-alt4: hsl(44, 60%, 75%);
  --color-contrast-low: hsl(44, 60%, 60%);
  --color-contrast-low-alt: hsl(44, 60%, 70%);
  --color-contrast-medium: hsl(44, 60%, 40%);
  --color-contrast-high: hsl(44, 60%, 30%);
  --color-contrast-higher: hsl(44, 60%, 10%);

  --color-snippet-selected: var(--color-contrast-lower-alt2);

  --color-sidebar: #fff;
  --color-sidebar-item-selected: var(--color-contrast-lower-alt2);

  --color-border: var(--color-contrast-lower-alt3);

  --color-button: hsl(44, 60%, 85%);
  --color-button-hover: var(--color-contrast-low-alt);
  --color-button-action-hover: var(--color-contrast-lower-alt3); 
  
  --color-checkbox: var(--color-contrast-lower-alt);

  --color-input: var(--color-contrast-lower-alt);

  --color-select: var(--color-contrast-lower-alt);

  --color-menu-selected: var(--color-contrast-lower-alt3);

  --color-tag-delete: var(--color-contrast-lower-alt4);
}

[data-theme='light:material'] {
  --color-bg: hsl(0, 0%, 98%);
}

// DARK

[data-theme='dark:one'] {
  --color-primary: hsl(215, 69%, 45%);
  
  --color-bg: hsl(220, 13%, 18%);

  --color-contrast-lower: hsl(220, 13%, 20%);
  --color-contrast-lower-alt: hsl(220, 13%, 22%);
  --color-contrast-lower-alt2: hsl(220, 13%, 25%);
  --color-contrast-lower-alt3: hsl(220, 13%, 30%);
  --color-contrast-lower-low: hsl(220, 13%, 40%);
  --color-contrast-medium: hsl(220, 13%, 50%);
  
  --color-border: var(--color-contrast-lower-alt2);
  
  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower-alt);
  
  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower-alt);
  --color-sidebar-icon: var(--color-text);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2); 

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower-alt);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme='dark:dracula'] {
  --color-primary: hsl(215, 69%, 45%);

  // при конвертации в hsl цвет отличается, поэтому оставляем в hex
  --color-bg: #282A36; 

  --color-contrast-lower: hsl(231, 15%, 20%);
  --color-contrast-lower-alt: hsl(231, 15%, 22%);
  --color-contrast-lower-alt2: hsl(231, 15%, 25%);
  --color-contrast-lower-alt3: hsl(231, 15%, 30%);
  --color-contrast-lower-low: hsl(231, 15%, 40%);
  --color-contrast-lower-medium: hsl(231, 15%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower-alt2);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower-alt2);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower-alt2);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme='dark:monokai'] {
  --color-primary: hsl(215, 69%, 45%);

  // при конвертации в hsl цвет отличается, поэтому оставляем в hex
  --color-bg: #272822;

  --color-contrast-lower: hsl(70, 8%, 20%);
  --color-contrast-lower-alt: hsl(70, 8%, 22%);
  --color-contrast-lower-alt2: hsl(70, 8%, 25%);
  --color-contrast-lower-alt3: hsl(70, 8%, 30%);
  --color-contrast-lower-low: hsl(70, 8%, 40%);
  --color-contrast-lower-medium: hsl(70, 8%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme='dark:merbivore'] {
  --color-primary: hsl(215, 69%, 45%);

  --color-bg: hsl(0, 0%, 11%);

  --color-contrast-lower: hsl(0, 0%, 20%);
  --color-contrast-lower-alt: hsl(0, 0%, 22%);
  --color-contrast-lower-alt2: hsl(0, 0%, 25%);
  --color-contrast-lower-alt3: hsl(0, 0%, 30%);
  --color-contrast-lower-low: hsl(0, 0%, 40%);
  --color-contrast-lower-medium: hsl(0, 0%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme='dark:material'] {
  --color-primary: hsl(215, 69%, 45%);

   // при конвертации в hsl цвет отличается, поэтому оставляем в hex
  --color-bg: #263238;

  --color-contrast-lower: hsl(200, 19%, 22%);
  --color-contrast-lower-alt: hsl(200, 19%, 25%);
  --color-contrast-lower-alt2: hsl(200, 19%, 27%);
  --color-contrast-lower-alt3: hsl(200, 19%, 30%);
  --color-contrast-lower-low: hsl(200, 19%, 40%);
  --color-contrast-lower-medium: hsl(200, 19%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}


[data-theme='dark:material-palenight'] {
  --color-primary: hsl(215, 69%, 45%);

   // при конвертации в hsl цвет отличается, поэтому оставляем в hex
  --color-bg: #292D3F;


  --color-contrast-lower: hsl(229, 21%, 22%);
  --color-contrast-lower-alt: hsl(229, 21%, 25%);
  --color-contrast-lower-alt2: hsl(229, 21%, 27%);
  --color-contrast-lower-alt3: hsl(229, 21%, 30%);
  --color-contrast-lower-low: hsl(229, 21%, 40%);
  --color-contrast-lower-medium: hsl(229, 21%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower-alt);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower-alt);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower-alt);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme='dark:tokyo-night'] {
  --color-primary: hsl(215, 69%, 45%);

   // при конвертации в hsl цвет отличается, поэтому оставляем в hex
  --color-bg: #1C2029;


  --color-contrast-lower: hsl(229, 21%, 20%);
  --color-contrast-lower-alt: hsl(229, 21%, 22%);
  --color-contrast-lower-alt2: hsl(229, 21%, 25%);
  --color-contrast-lower-alt3: hsl(229, 21%, 30%);
  --color-contrast-lower-low: hsl(229, 21%, 40%);
  --color-contrast-lower-medium: hsl(229, 21%, 50%);

  --color-snippet-list: var(--color-bg);
  --color-snippet-selected: var(--color-contrast-lower-alt);

  --color-sidebar: var(--color-bg);
  --color-sidebar-item-selected: var(--color-contrast-lower-alt);
  --color-sidebar-icon: var(--color-text);

  --color-border: var(--color-contrast-lower-alt2);

  --color-text: hsl(0, 0%, 70%);

  --color-button: var(--color-contrast-lower-alt);
  --color-button-hover: var(--color-contrast-lower-alt2);
  --color-button-action: var(--color-contrast-low); 
  --color-button-action-hover: var(--color-contrast-lower-alt2);

  --color-input: var(--color-bg);

  --color-menu-selected: var(--color-contrast-lower-alt);

  --color-tag-delete: var(--color-contrast-lower-alt3);
}

[data-theme^="dark"] {
  > a {
    color: var(--color-contrast-medium);
    &:hover {
      color: var(--color-text);
    }
  }
}